<template>
  <div class="bbx-box">
    <div class="bbx-sider">
      <div class="menu-item">
        <img class="menu-icon" src="~/assets/img/menu-icon.png" alt="" />
        <span class="title">百宝工具箱</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
      <div class="fixed-menu-item">
        <el-icon style="font-size: 16px"><Ticket /></el-icon>
        <span class="title">购买/续费</span>
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="bbx-main">
      <div class="header">
        <div class="shipin">
          <img src="~@/assets/img/shipin.png" alt="" />
          <span>使用教程</span>
        </div>
        <div class="shuaxin">
          <span>刷新</span>
          <img src="~@/assets/img/shuaxin.png" alt="" />
        </div>
      </div>
      <div class="main-box">
        <div class="title">第一步：选择入口形式</div>
        <div class="line"></div>
        <div class="box">
          <div class="tag" :class="[active == item.value ? 'active' : '']" @click="active = item.value" v-for="(item,i) in boxData" :key="'box'+i">
            {{ item.label }}
          </div>
        </div>
        <div class="title">第二步：输入参数信息</div>
        <div class="line"></div>
        <div class="input"><span>请输入链接地址</span></div>
        <div class="btn">
          <el-button class="save" type="primary">立即生成</el-button>
          <span>消耗10NB/次</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Ticket, ArrowRight } from "@element-plus/icons-vue";
const active = ref('')
const boxData = ref([
  {
    label: "相似宝贝",
    value: 1,
  },
  {
    label: "TB精选",
    value: 2,
  },
  {
    label: "小黑盒",
    value: 3,
  },
  {
    label: "ifashion",
    value: 4,
  },
  {
    label: "酷玩星球",
    value: 5,
  },
  {
    label: "首单优惠",
    value: 6,
  },
  {
    label: "每平每屋",
    value: 7,
  },
  {
    label: "极有家",
    value: 8,
  },
  {
    label: "亲宝贝",
    value: 9,
  },
  {
    label: "U先试用",
    value: 10,
  },
  {
    label: "TB吃货",
    value: 11,
  },
  {
    label: "时尚新品",
    value: 12,
  }
]);
</script>

<style lang="scss" scoped>
.bbx-box {
  display: flex;
  justify-content: space-between;
  background-color: #22292e;
  height: calc(100vh - 70px);
  overflow-y: hidden;
}
.bbx-sider {
  width: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  .menu-item {
    background: #738884;
    border-radius: 5px;
    height: 38px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .menu-icon {
      width: 16px;
      height: 16px;
    }
    .title {
      margin: 0 20px;
    }
  }

  .fixed-menu-item {
    width: 200px;
    background: linear-gradient(270deg, #ffc8e0 0%, #ffedf5 100%);
    border-radius: 5px;
    height: 38px;
    color: #e6257a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    left: 20px;
    .menu-icon {
      width: 16px;
      height: 16px;
    }
    .title {
      margin: 0 20px;
    }
  }
}
.bbx-main {
  padding: 20px;
  width: calc(100vw - 200px);
  overflow: auto;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shipin {
      display: flex;
      align-items: center;
      > img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
      > span {
        font-size: 16px;
        font-weight: 500;
        text-align: LEFT;
        color: #ffffff;
      }
    }
    .shuaxin {
      display: flex;
      align-items: center;
      > img {
        width: 18px;
        height: 18px;
        margin-left: 8px;
      }
      > span {
        font-size: 16px;
        font-weight: 500;
        text-align: LEFT;
        color: #ffffff;
      }
    }
  }
  .main-box {
    color: #fff;
    margin-top: 57px;
    display: flex;
    flex-direction: column;
    .title {
      height: 25px;
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      line-height: 21px;
      margin-bottom: 20px;
      text-align: center;
    }
    .line {
      width: 100%;
      height: 1px;
      background-color: #434d56;
      margin-bottom: 30px;
    }
    .box {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 60px;
      .tag {
        width: 164px;
        height: 52px;
        background: #424b52;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .tag.active{
        background-color: #fff;
        color: #32C7AA;
      }
    }
    .input {
      height: 52px;
      background: #424b52;
      border-radius: 5px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 500;
      text-align: LEFT;
      color: #999999;
      align-items: center;
      padding: 15px;
    }
    .btn {
      display: flex;
      align-items: center;
      ::v-deep .el-button.save {
        width: 124px;
        height: 52px;
        background: #32C7AA;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        border: 0;
        margin-right: 10px;
      }
    }
  }
}
</style>
